<!DOCTYPE html>
<html lang="en">

<head>
    <title>聊天室</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">

    <style>
        .home_zhangdui_nav {
            overflow: hidden;
            background: #00103e url('../../images/reg/back.png') 10px center no-repeat;
            border-bottom: 1px solid #24254E;
            background-size: 0.7rem;
            z-index: 99;
        }

        .Contain {
            position: absolute;
            top: 50px;
            width: 100%;
            background: #080a31;
        }

        .stopNav {
            height: 60px;
            background: #161752;
            overflow: hidden;
            text-align: center;
            position: fixed;
            width: 100%;
            z-index: 99;
        }

        .stopTime {
            float: left;
            width: 50%;
            height: 60px;
            color: #BFC1F2;
        }

        .balanceNav {
            float: right;
            width: 50%;
            height: 60px;
            color: #BFC1F2;
        }

        .stopTime .time,
        .balance {
            font-size: .45rem;
            color: #FFB400;
        }

        .mask {
            padding-top: 7px;
            padding-bottom: 5px;
        }

        .inputContain {
            position: fixed;
            height: 50px;
            width: 100%;
            bottom: 0;
            background: #10104D;
            line-height: 50px;
            padding: 0 1%;
            color: #BFC1F2;
            font-size: .4rem;
        }

        .content {
            height: 32px;
            box-sizing: content-box;
            padding-left: 2%;
            width: 70%;
            margin: auto;
            border: 1px solid #3D5496;
            background: #1A1B58;
            margin: 0 1%;
            margin-left: 2%;
            color: #fff;
        }

        .bet {
            width: 19%;
            height: 37px;
            margin: 0 1%;
            border-radius: 5px;
            background: #FFB400;
            color: #fff;
            border: 0;
            letter-spacing: 3px;
        }

        .send {
            width: 19%;
            height: 37px;
            margin: 0 1%;
            border-radius: 5px;
            background: #FFB400;
            color: #fff;
            border: 0;
            letter-spacing: 3px;
            display: none;
        }

        .chatContent {
            font-size: .4rem;
            padding-bottom: 80px;
            margin-top: 65px;
            border-radius: 5px;
        }

        .chatContent .timeNav {
            color: #3C3F8F;
            font-size: 0.35rem;
            clear: both;
        }

        .chatContent .user {
            color: #7E85C2;
        }

        .other {
            width: 50%;
            margin-left: 20%;
            position: relative;
            margin-top: 10px;
        }

        .other:after {
            display: block;
            content: '';
            height: 50px;
            width: 25%;
            background: url(../../images/home/user1.png) no-repeat;
            background-size: 100%;
            position: absolute;
            top: 5%;
            left: -35%;
        }

        .other:before {
            display: block;
            content: '';
            position: absolute;
            top: .65rem;
            left: -19px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 15px solid #FFB400;
            z-index: -11;
        }

        .me {
            width: 50%;
            margin-left: 30%;
            position: relative;
            margin-top: 10px;
            text-align: right;
        }

        .me:after {
            display: block;
            content: '';
            height: 50px;
            width: 25%;
            background: url(../../images/home/user1.png) no-repeat;
            background-size: 100%;
            position: absolute;
            top: 5%;
            right: -35%;
            overflow: hidden;
        }

        .me:before {
            display: block;
            content: '';
            position: absolute;
            top: .65rem;
            right: -19px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 15px solid #1DA8FF;
            transform: rotate(180deg);
            z-index: -11;
        }

        .content_info {
            display: inline-block;
            background: #F6BE37;
            border-radius: 5px;
            padding: 5px 10px;
            overflow: hidden;
            max-width: 100%;
            box-sizing: border-box;
        }

        .me_content_info {
            display: inline-block;
            background: #1DA8FF;
            border-radius: 5px;
            padding: 5px 10px;
            overflow: hidden;
            max-width: 100%;
            box-sizing: border-box;
            float: right;
            text-align: left;
        }

        .betContain {
            display: none;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            color: #D0D2F7;
            font-size: .4rem;
        }

        .betContainModal {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            color: #D0D2F7;
            font-size: .4rem;
        }

        .selectContain {
            height: 330px;
            background: #1B1D68;
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 999;
        }

        .clanInfo {
            display: none;
            max-height: 25%;
            background: #1B1D68;
            width: 76%;
            position: fixed;
            bottom: 51%;
            z-index: 999;
            left: 10%;
            padding: 2%;
            border-radius: 5px;
            font-size: .37rem;
            z-index: 999
        }

        .rate {
            overflow: hidden;
            margin-bottom: 5px;
            color: #FFCD29;
        }

        .win_rate_contain {
            float: left;
        }

        .clanInfo:after {
            display: block;
            content: '';
            position: absolute;
            bottom: -5px;
            left: 15%;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 15px solid #1B1D68;
            transform: rotate(30deg);
            z-index: -11;
        }

        .league_rate_contain {
            float: right;
        }

        .title {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .clans {
            height: 39%;
            background: #111351 url('../../images/home/icon_room_vs.png') center 30% no-repeat;
            background-size: .8rem;
            display: flex;
            text-align: center;
            font-size: .35rem;
        }

        .clans2 {
            height: 39%;
            background: #111351 url('../../images/home/icon_room_vs.png') center 30% no-repeat;
            background-size: .8rem;
            display: none;
            text-align: center;
            font-size: .35rem;
            transition: height 0.5s;
        }

        .Activeclan2 {
            background: url(../../images/home/activeteam.png) 60% center no-repeat;
            background-size: 100%;
            color: #FFCD29;
        }

        .Activeclan1 {
            background: url(../../images/home/activeLeft.png) 60% center no-repeat;
            background-size: 100%;
            color: #FFCD29;
        }

        .clans img,
        .clans2 img {
            display: block;
            margin: auto;
            margin-top: 10%;
            width: 1.6rem;
            border-radius: 100%;
        }

        .clans div,
        .clans2 div {
            flex: 1;
        }

        .clans .name .clans2 .name {
            margin-top: 3%;
            font-size: .33rem;
        }

        .gold {
            height: 50px;

            background: #111351;
            display: flex;
        }

        .gold div {
            flex: 1;
        }

        .goldiput {
            display: block;
            width: 70%;
            height: 70%;
            margin: auto;
            border: 1px solid #454898;
            background: #111351;
            border-radius: 5px;
            color: #BFC1F2;
            font-size: .4rem;
            text-align: center;
            margin-top: 7px;
        }

        .gold_active {
            border: 1px solid #FFCD29;
        }

        .last_confirm {
            height: 25%;

        }

        .confirm {
            background: #FFCD29;
            color: #fff;
            width: 75%;
            height: 50px;
            border-radius: 5px;
            border: 0;
            display: block;
            margin: 10px auto;
            font-size: .55rem;
            letter-spacing: 3px;
        }

        .title img {
            float: right;
            margin-right: 10px;
            width: .7rem;
            margin-top: 1.7%;
        }

        .title>div {
            display: flex;
            /* height:100%; */
        }

        .title>div div {
            flex: 1;
        }

        .titleActive {
            background: #3A44A1;
            color: #FFB400;
        }

        .killContain {
            display: none;
            background: #111351;
            padding: 10px 0;
        }

        .killOne {
            overflow: hidden;
            background: #111351;
        }

        .killTwo {
            overflow: hidden;
            background: #1B1D68;
            width: 94%;
            margin: auto;
            padding-top: 10px;
        }

        .killOne>div {
            text-align: center;
            width: 45.5%;
            margin-left: 3%;
            float: left;
            background: #1B1D68;
            height: 50px;
            margin-bottom: 15px;
            font-size: .4rem;
            line-height: .6rem;
            padding-top: .15rem;
            border-radius: 5px;
            border: 1px solid #1B1D68;
        }

        .killOne .littleActive {
            border: 1px solid #FFB400;
        }

        .killOne .littleActive .peilv {
            color: #FFB400;
        }

        .ml {
            margin-left: 10%;

        }

        .jj {
            letter-spacing: .5rem;
            padding-left: .5rem;
            font-size: .35rem;
            color: #7E85C2;
        }

        .tema {
            overflow: hidden;
            text-align: center;
        }

        .tema>div {
            width: 10%;
            margin-bottom: 10px;
            height: 30PX;
            line-height: 30px;
            margin-left: 8.33%;
            float: left;
            border: 1px solid #454898;
        }

        .tema .temaActive {
            border-color: #FFB400;
            color: #FFB400;
        }

        .changeContain {
            height: 478px;
            transition: height 0.5s;
        }

        .isShow {
            display: none;
            color: #FFB400;
        }

        body {
            background: #080a31;
        }
    </style>
</head>

<body>

    <body>
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            <span class="clanNames">
                <span class="a">OMG</span> VS
                <span class="b">OMG</span>
            </span>
        </div>
        <div class="Contain">
            <div class="stopNav">
                <div class="stopTime">
                    <div class="mask">下注截至时间</div>
                    <div class="time">1分30秒</div>
                </div>
                <div class="balanceNav">
                    <div class="mask">余额</div>
                    <div class="balance">
                        <span class="fdOver"></span>
                        <span>金币</span>
                    </div>
                </div>
            </div>

            <div class="chatContent">

                <div class="other">
                    <div class="user">
                        <span class="userName">墨眸</span>
                    </div>
                    <div class="content_info">欢迎来到王者竞猜！！！</div>
                    <div class="timeNav">
                        <span class="year">2017/11/6</span>
                        <span class="time">19:20</span>
                    </div>
                </div>


            </div>
        </div>

        <div class="inputContain">
            <input type="text" class="content">
            <button class="bet">投注</button>
            <button class="send">发送</button>
        </div>
        <div class="betContain">
            <div class="betContainModal"></div>
            <div class="clanInfo">
                <div class="rate">
                    <span class="win_rate_contain">胜率：
                        <span class="win_rate_"></span>%
                    </span>

                    <span class="league_rate_contain">联赛胜率:
                        <span class="league_rate"></span>%
                    </span>
                </div>
                <div class="info">

                </div>
            </div>
            <div class="selectContain">

                <div class="title">
                    <!-- <img src="../../images//home/none.png" alt=""> -->
                    <div class="type">
                        <div class="singleNum titleActive">单场胜负</div>
                        <div class="killNum">击杀人数</div>
                        <div class="allNum">总场胜负</div>
                    </div>
                </div>
                <!-- 战队图标 type0-->
                <div class="clans">
                    <div class="clan1">
                        <img class="img1" src="../../images/home/clan1.png" alt="">
                        <div class="name">QG</div>
                        <div class="third">赔率：
                            <span class="odds">1.86</span>
                        </div>
                    </div>
                    <div class="clan2">
                        <img class="img2" src="../../images/home/clan1.png" alt="">
                        <div class="name">OMG</div>
                        <div class="third">赔率：
                            <span class="odds">1.73</span>
                        </div>
                    </div>
                </div>
                <!-- 击杀人数 type1-->
                <div class="killContain">
                    <div class="killOne">
                        <div class="little">
                            <div class="peilv">小
                                <span class="ml">赔率:</span>
                                <span class="killOdds">1.9</span>
                            </div>
                            <div class="jj">01234</div>
                        </div>
                        <div class="big">
                            <div>大
                                <span class="ml">赔率:</span>
                                <span class="killOdds">1.9</span>
                            </div>
                            <div class="jj">56789</div>
                        </div>
                        <div class="single">
                            <div>单
                                <span class="ml">赔率:</span>
                                <span class="killOdds">1.9</span>
                            </div>
                            <div class="jj">02468</div>
                        </div>
                        <div class="double">
                            <div>双
                                <span class="ml">赔率:</span>
                                <span class="killOdds">1.9</span>
                            </div>
                            <div class="jj">13579</div>
                        </div>
                    </div>

                    <div class="killTwo">
                        <div style="text-align:center;margin-bottom: 5px;">特码
                            <span class="ml">赔率:</span>
                            <span class="killOdds">1.9</span>
                        </div>
                        <div class="tema">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                            <div>4</div>
                            <div>5</div>
                            <div>6</div>
                            <div>7</div>
                            <div>8</div>
                            <div>9</div>
                            <div>0</div>
                        </div>
                    </div>
                </div>
                <div class="clans2">
                    <div class="clan1">
                        <img class="img1" src="../../images/home/clan1.png" alt="">
                        <div class="">
                            <span class="name"></span>
                            <span class="isShowA isShow">(让场:
                                <span class="totalA"></span> )</span>
                        </div>
                        <div class="third">赔率：
                            <span class="odds">1.86</span>
                        </div>
                    </div>
                    <div class="clan2">
                        <img class="img2" src="../../images/home/clan1.png" alt="">
                        <div class="">
                            <span class="name"></span>
                            <span class="isShowB isShow">(让场:
                                <span class="totalB"></span>)</span>
                        </div>
                        <div class="third">赔率：
                            <span class="odds">1.73</span>
                        </div>
                    </div>
                </div>


                <div class="title">下注金额(金币)</div>
                <div class="gold">
                    <div>
                        <button class="goldiput">68</button>
                    </div>
                    <div>
                        <button class="goldiput">168</button>
                    </div>
                    <div>
                        <button class="goldiput">268</button>
                    </div>
                    <div>
                        <input class="goldiput otherGold" type="number" value="" placeholder="其他金额">
                    </div>
                </div>
                <div class="last_confirm">
                    <button class="confirm">确定</button>
                </div>
            </div>
        </div>
        <script src="../../js/jquery-3.2.1.min.js"></script>
        <script src="../../js/public.js"></script>
        <script src="../../js/sockjs.js"></script>
        <script>
            $(function () {

                let path = window.location.href,
                    id = path.split('?')[1].split('=')[1], //roomId
                    aInfo,
                    bInfo,
                    roomName, //房间名字
                    roomId, //roomId
                    raceId,
                    raceName,
                    fdAWinningRate,
                    fdBWinningRate,
                    fdALeagueRate,
                    fdBLeagueRate,
                    fdADesc,
                    fdBDesc,
                    avatar,
                    userName,
                    userId,
                    content,
                    wsUser1,
                    roomInfomation,
                    sendTime,
                    wsSend,
                    getNowFormatDate
                $.post(userInfoUrl, (res) => {
                    console.log(res)
                    let userInfo = res.obj
                    userId = userInfo.fdId,
                        userName = userInfo.fdNickname,
                        avatar = userInfo.fdAvatarUrl
                    $('.fdOver').text(userInfo.fdOver)
                })
                console.log(id)
                $.post(roomInfo, {
                    id
                }, res => {
                    console.log(res)
                    let obj = res.obj
                    roomInfomation = res.obj
                    raceId = obj.fdRaceId
                    raceName = obj.fdRaceName
                    roomName = obj.fdName
                    roomId = obj.fdId
                    $('.a').text(obj.fdClanAName)
                    $('.b').text(obj.fdClanBName)
                    $('.stopTime .time').text(obj.fdEndTime.substring('5'))
                    //单场胜负
                    $('.clans .clan1 .odds').text(obj.fdClanAScale)
                    $('.clans .clan2 .odds').text(obj.fdClanBScale)
                    $('.clans .clan1 .name').text(obj.fdClanAName)
                    $('.clans .clan2 .name').text(obj.fdClanBName)

                    $('.killOdds').text(obj.fdSizeScale)
                    $('.killTwo .killOdds').text(obj.fdSpecialScale)

                    $('.clans2 .clan1 .odds').html(obj.fdClanATotalScale)
                    $('.clans2 .clan2 .odds').html(obj.fdClanBTotalScale)
                    $('.clans2 .clan1 .name').html(obj.fdClanAName)
                    $('.clans2 .clan2 .name').html(obj.fdClanBName)

                    //让场胜负
                    if (obj.fdLetClanId == obj.fdClanAId) {
                        $('.isShowA').fadeIn('fast')
                        $('.totalA').text(obj.fdLetNum)
                    } else if (obj.fdLetClanId == obj.fdClanBId) {
                        $('.isShowB').fadeIn('fast')
                        $('.totalB').text(obj.fdLetNum)
                    }

                    $.post(clanInfoUrl, {
                        id: obj.fdClanAId
                    }, (res) => {

                        let obj = res.obj
                        aInfo = obj
                        $('.img1').attr('src', obj.fdAvatarPic)
                    })
                    $.post(clanInfoUrl, {
                        id: obj.fdClanBId
                    }, (res) => {

                        let obj = res.obj
                        bInfo = obj
                        $('.img2').attr('src', obj.fdAvatarPic)
                    })
                    initWebsocket()
                    console.log(roomInfomation)


                    //websocket
                    //&msgType=-1&roomName=${roomName}&raceName=${raceName}&userId=${userId}&userName=${userName}&avatar=${avatar}
                    function initWebsocket() {
                        var websocket;
                        // 首先判断是否 支持 WebSocket
                        if ('WebSocket' in window) {
                            websocket = new WebSocket(
                                `ws://127.0.0.1:8080/wsChat?roomId=${roomId}&raceId=${raceId}`);
                        } else {
                            websocket = new SockJS(
                                `http://127.0.0.1:8080/wsChat?roomId=${roomId}&raceId=${raceId}`
                            );
                        }
                        websocket.onopen = function (event) {
                            console.log(event);
                            //        var content = $("#content").val();
                            var sendTime = getNowFormatDate();

                            var wsUser = {
                                roomId,
                                raceId,
                                roomName,
                                raceName,
                                userId,
                                avatar,
                                userName,
                                msgType: -1,
                                sendTime,
                                content: '我来了'
                            };

                            var wsUserStr = JSON.stringify(wsUser);
                            websocket.send(wsUserStr);
                        };
                        websocket.onmessage = function (event) {
                            console.log(event);
                            let msg = JSON.parse(event.data)
                            if (msg.content == '下注失败') {
                                alert('下注失败,请重新下注')
                            } else if (msg.userId == userId) {
                                $('.chatContent').append(
                                    `<div class="me">
                    <div class="user">
                        <span class="userName">${msg.userName}</span>
                    </div>
                    <div class="me_content_info">${msg.content}</div>
                    <div class="timeNav">
                        <span class="year">${msg.sendTime}</span>
                    </div>
                </div>`
                                )
                                $('.fdOver').text($('.fdOver').text() - msg.amount)

                                // $('.me:after').css('background', `url(${msg.avatar}) no-repeat`)
                                // $('.me:after').css('background', `url(${msg.avatar}) no-repeat`)
                                $('head').append("<style>.me:after{ background:url(" + msg.avatar +
                                    ") no-repeat;background-size:50px 50px ;}</style>");
                            } else {
                                $('.chatContent').append(
                                    `<div class="other">
                                    <div class="user">
                                        <span class="userName">${msg.userName}</span>
                                    </div>
                                    <div class="content_info">${msg.content}</div>
                                    <div class="timeNav">
                                        <span class="year">${msg.sendTime}</span>
                                    </div>
                                </div>`
                                )
                                $('head').append("<style>.other:after{ background:url(" + msg.avatar +
                                    ") no-repeat;background-size:50px 50px ;}</style>");
                            }
                        }
                        websocket.onclose = function (event) {
                            websocket.close();
                        }

                        wsSend = function () {
                            var wsUserStr1 = JSON.stringify(wsUser1);
                            websocket.send(wsUserStr1);

                        }

                        getNowFormatDate = function () {
                            var date = new Date();
                            var seperator1 = "-";
                            var seperator2 = ":";
                            var month = date.getMonth() + 1;
                            var strDate = date.getDate();
                            if (month >= 1 && month <= 9) {
                                month = "0" + month;
                            }
                            if (strDate >= 0 && strDate <= 9) {
                                strDate = "0" + strDate;
                            }
                            var currentDate = date.getFullYear() + seperator1 + month + seperator1 +
                                strDate +
                                " " + date.getHours() + seperator2 + date.getMinutes() +
                                seperator2 + date.getSeconds();
                            return currentDate;
                        }

                        $('.send').click(function () {
                            sendTime = getNowFormatDate();
                            content = $('.content').val()
                            wsUser1 = {
                                roomId,
                                raceId,
                                roomName,
                                raceName,
                                userId,
                                avatar,
                                userName,
                                msgType: -1,
                                sendTime,
                                content
                            }
                            wsSend();
                            $('.content').val('')

                            $('.bet').fadeIn('fast')
                            $('.send').fadeOut('fast')
                        })
                        // $('.confirm').click(function () {

                        // })
                    }

                    $('.content').bind('input propertychange', function () {
                        let con = $('.content').val()
                        console.log(con)
                        if (con.length != '') {
                            $('.send').fadeIn('fast')
                            $('.bet').fadeOut('fast')
                        } else {
                            $('.send').fadeOut('fast')
                            $('.bet').fadeIn('fast')
                        }
                    })






                    $('.bet').click(() => {
                        $('.betContain').fadeIn('fast')
                        $('.name').removeClass('clan_active')
                        $('.goldiput').removeClass('gold_active')

                        //选择类型
                        $('.type div').click(function () {
                            $('.type div').removeClass('titleActive')
                            console.log($(this).index())
                            $(this).addClass('titleActive')
                            console.log($('.titleActive').index())

                            if ($('.titleActive').index() == 1) {
                                $('.selectContain').addClass('changeContain')
                                $('.clans').fadeOut('fast')
                                $('.clans2').fadeOut('fast')
                                $('.clanInfo').fadeOut('fast')
                                $('.killContain').fadeIn('fast')
                                $('.clanInfo').fadeOut('fast')
                            } else if ($('.titleActive').index() == 0) {
                                $('.clan2').removeClass('Activeclan')
                                // $('.selectContain').addClass('changeContain')
                                $('.clanInfo').fadeOut('fast')
                                $('.killContain').fadeOut('fast')
                                $('.selectContain').removeClass('changeContain')
                                $('.clans2').fadeOut('fast')
                                $('.clans').fadeIn('fast')
                                $('.isShow').fadeOut('fast')
                            } else if ($('.titleActive').index() == 2) {
                                $('.clan2').removeClass('Activeclan')
                                // $('.selectContain').addClass('changeContain')
                                $('.clans').fadeOut('fast')
                                $('.clanInfo').fadeOut('fast')
                                $('.killContain').fadeOut('fast')
                                $('.selectContain').removeClass('changeContain')
                                $('.clans2').fadeIn('fast')
                                $('.clans2').css('display', 'flex')




                            }

                        })

                        //选择战队
                        $('.clan1').click(function () {
                            $('.clan2').removeClass('Activeclan2')
                            $('.clan2').removeClass('Activeclan')
                            $('.clanInfo').fadeIn('fast')
                            $('.win_rate_').text(aInfo.fdWinningRate)
                            $('.league_rate').text(aInfo.fdLeagueRate)
                            $('.info').text(aInfo.fdDesc)

                            $(this).addClass('Activeclan1')
                            $(this).addClass('Activeclan')

                        })
                        $('.clan2').click(function () {
                            $('.clan1').removeClass('Activeclan1')
                            $('.clan1').removeClass('Activeclan')
                            $('.clanInfo').fadeIn('fast')
                            $('.win_rate_').text(bInfo.fdWinningRate)
                            $('.league_rate').text(bInfo.fdLeagueRate)
                            $('.info').text(bInfo.fdDesc)
                            $(this).addClass('Activeclan2')
                            $(this).addClass('Activeclan')

                        })
                        //选择大小
                        $('.killOne>div').click(function () {
                            $('.killOne>div').removeClass('littleActive')
                            $('.tema>div').removeClass('temaActive')
                            $(this).addClass('littleActive')
                        })
                        //选择特码
                        $('.tema>div').click(function () {
                            $('.clan2').removeClass('Activeclan')
                            $('.clan1').removeClass('Activeclan')
                            $('.tema>div').removeClass('temaActive')
                            $('.killOne>div').removeClass('littleActive')
                            $(this).addClass('temaActive')
                        })

                        $('.gold .goldiput').click(function () {
                            $('.goldiput').removeClass('gold_active')
                            $(this).addClass('gold_active')
                        })

                        $('.otherGold').click(() => {
                            $('.clanInfo').fadeOut('fast')
                        })
                    })



                    $('.title img').click(function () {
                        $('.betContain').fadeOut('fast');
                        $('.clanInfo').fadeOut('fast');
                    })

                    $('.betContainModal').click(function () {
                        $('.betContain').fadeOut('fast')
                    })

                })
                $('.confirm').click(function () {
                    // let clanName = $('.Activeclan .name').text()

                    let amount

                    let index = $('.titleActive').index()
                    sendTime = getNowFormatDate();
                    if ($('.gold_active')[0].tagName == 'BUTTON') {
                        amount = $('.gold_active').html()
                    } else {
                        amount = $('.gold_active').val()
                    }
                    if (index == 0) {
                        let clanId,
                            clanName
                        console.log(roomInfomation)
                        if ($('.Activeclan').index() == 0) {
                            clanId = roomInfomation.fdClanAId
                            clanName = roomInfomation.fdClanAName
                        } else {
                            clanId = roomInfomation.fdClanBId
                            clanName = roomInfomation.fdClanBName

                        }
                        wsUser1 = {
                            roomId,
                            raceId,
                            roomName,
                            raceName,
                            userId,
                            avatar,
                            userName,
                            msgType: 0,
                            sendTime,
                            content,
                            clanId,
                            amount,
                            clanName
                        }

                    } else if (index == 1) {
                        let clanId,
                            clanName

                        let type = 1
                        let numActive = $('.littleActive').index()
                        if (numActive == 0) {
                            bettingNum = '01234'
                        } else if (numActive == 1) {
                            bettingNum = '56789'
                        } else if (numActive == 2) {
                            bettingNum = '13579'
                        } else if (numActive == 3) {
                            bettingNum = '02468'
                        } else if ($('.temaActive').text() != '') {
                            bettingNum = $('.temaActive').text()
                            type = 3
                        }
                        wsUser1 = {
                            roomId,
                            raceId,
                            roomName,
                            raceName,
                            userId,
                            avatar,
                            userName,
                            msgType: type,
                            sendTime,
                            content,
                            bettingNum,
                            amount
                        }
                    } else if (index == 2) {
                        console.log(roomInfomation)
                        if ($('.Activeclan').index() == 0) {
                            clanId = roomInfomation.fdClanAId
                            clanName = roomInfomation.fdClanAName
                        } else {
                            clanId = roomInfomation.fdClanBId
                            clanName = roomInfomation.fdClanBName

                        }
                        wsUser1 = {
                            roomId,
                            raceId,
                            roomName,
                            raceName,
                            userId,
                            avatar,
                            userName,
                            msgType: 2,
                            sendTime,
                            content,
                            clanId,
                            amount,
                            clanName
                        }
                    }

                    console.log($('.gold_active')[0].tagName)

                    // if('.clan2 .Activeclan'){
                    //     type=0
                    // }
                    // else if('.clan2 .Activeclan'){
                    //     type=0
                    // }
                    // $.post(gamingQuiz,{fdAmount,fdType},res=>{
                    //     console.log(res)
                    // })



                    wsSend();

                    $('.betContain').fadeOut('fast')
                })
            })
        </script>
    </body>

</html>